<template>
  <div>
    <page-main background="transparent" padding="0px">
      <div class="chunk">
        <div class="heade-option">
          <el-button type="success" size="medium" round @click="addMenu"
            >新增菜单</el-button
          >
        </div>
      </div>
      <div class="chunk">
          <el-table
            :data="handleVueRouterList"
            row-key="meta.id"
            border
            size="medium"
            :indent="16"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            >
            <el-table-column label="标题" width="140" fixed="left">
              <template slot-scope="scope">
                <span>{{ scope.row.meta.title }}</span>
              </template>
            </el-table-column>

            <el-table-column label="类型" width="80" align="center">
              <template slot-scope="scope">
                <template v-if="scope.row.meta.type">
                  <el-tag size="small">菜单</el-tag>
                </template>
                <template v-else>
                  <el-tag type="danger" size="small">导航</el-tag>
                </template>
              </template>
            </el-table-column>

            <el-table-column label="组件文件路径" align="center">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.meta.component }}
                </span>
              </template>
            </el-table-column>

            <el-table-column label="图标" width="80" align="center">
              <template slot-scope="scope">
                <i
                  class="overall-icon"
                  style="font-size: 18px"
                  :class="scope.row.meta.icon.normal"
                ></i>
              </template>
            </el-table-column>

            <el-table-column label="激活图标" width="80" align="center">
              <template slot-scope="scope">
                <i
                  class="overall-icon"
                  style="font-size: 18px"
                  :class="scope.row.meta.icon.active"
                ></i>
              </template>
            </el-table-column>

            <el-table-column label="name" prop="name"> </el-table-column>

            <el-table-column label="访问路由" prop="path"> </el-table-column>

            <el-table-column label="菜单栏显示" align="center">
              <template slot-scope="scope">
                <template v-if="scope.row.meta.display.navigator_show">
                  <el-tag size="small" effect="dark">显示</el-tag>
                </template>
                <template v-else>
                  <el-tag type="danger" size="small" effect="dark">隐藏</el-tag>
                </template>
              </template>
            </el-table-column>

            <el-table-column label="面包屑显示" align="center">
              <template slot-scope="scope">
                <template v-if="scope.row.meta.display.breadcrumbs_show">
                  <el-tag size="small" effect="dark">显示</el-tag>
                </template>

                <template v-else>
                  <el-tag type="danger" size="small" effect="dark">隐藏</el-tag>
                </template>
              </template>
            </el-table-column>

            <el-table-column label="默认展开" align="center">
              <template slot-scope="scope">
                <template v-if="scope.row.meta.display.childrenDevelop">
                  <el-tag size="small" effect="dark">展开</el-tag>
                </template>

                <template v-else>
                  <el-tag type="danger" size="small" effect="dark"
                    >不展开</el-tag
                  >
                </template>
              </template>
            </el-table-column>

            <el-table-column label="右侧箭头显示" align="center">
              <template slot-scope="scope">
                <template v-if="scope.row.meta.icon.right_arrow">
                  <el-tag size="small" effect="dark">显示</el-tag>
                </template>

                <template v-else>
                  <el-tag type="danger" size="small" effect="dark">隐藏</el-tag>
                </template>
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
              fixed="right"
              width="320"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  plain
                  @click="addChildMenu(scope.row)"
                  >新增子菜单</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  plain
                  @click="editMenuItem(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  plain
                  @click="clickRemoveMenuButton(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
      </div>
    </page-main>
  </div>
</template>

<script>
import api from "@/assets/overall/js/api";
import { mapGetters } from "vuex";
// import pageHeader from "~/page-header/page-header.vue";
import pageMain from "~/page-main/page-main.vue";
export default {
  components: { pageMain },
  computed: {
    ...mapGetters(["handleVueRouterList"], "overall"),
  },
  mounted() {
    console.log("handleVueRouterList", this.handleVueRouterList);
  },
  data() {
    return {
      modalOpen: true,
    };
  },

  methods: {
    // 删除
    clickRemoveMenuButton(e) {
      console.log("removeMenuItem e");
      console.log(e);
      let { id } = e;
      this.removeMenuItem(id).then((result) => {
        console.log(result);
      });
    },
    removeMenuItem(id) {
      return this.$axios.post(api.mork_navigator_data, {
        active: "remove",
        data: { id },
      });
    },
    // 编辑
    editMenuItem(e) {
      console.log(e);
      console.log("点击了编辑");
    },
    // 新增
    addMenuItem(e) {
      console.log(e);
      console.log("点击了新增");
    },
    // 查看
    getMenuItem() {},
    // 新增主菜单
    addMenu() {
      this.$router.push({
        name: "menuManagementAdd",
        params: {
          mode: "addMenu",
          pid: null,
        },
      });
    },
    addChildMenu(row) {
      console.log(row);
      let id = row.meta.id;
      if (id) {
        this.$router.push({
          name: "AddMenuManagement",
          params: {
            mode: "addChildMenu",
            pid: id,
          },
        });
      }
    },
  },
};
</script>

<style>
.chunk {
  background: white;
  margin-bottom: 20px;
  padding: 14px 14px;
}

.menu-header {
  height: 46px;
  background: white;
}


.heade-option {
}
.table-menu {
  height: 65px;
  box-shadow: 0px 0px 3px #c3c3c324;
  display: flex;
  align-items: center;
  padding: 0px 15px;
}
</style>
